<template>
  <div class="bottomViews">
    <div class="topInforViews">
       
       <div class="left-big-title">
           <div class="left-space"></div>
           <span>商票各类金额走势图</span>
       </div>
      
   </div>
  
   <div id="mline" class="bottom_bar_views"></div>
  </div>
</template>

<script setup name="multiterm">

import { getCurrentInstance, proxyRefs, ref } from "vue"
import { useRouter } from "vue-router"
import * as echarts from 'echarts'
import myEventBus from '@/utils/notice'
const {proxy} = getCurrentInstance()
const router = useRouter()
const emitter = myEventBus
var myChart
emitter.on("resize",(res) =>{
 
    myChart.resize()
})

function showBarEcharts(){
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('mline');
    myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;

    option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: { // // 图表上方的图例，需要和series中的name一致
        itemWidth: 10,
        itemHeight: 10,
        left: 'left',
        // 统一设置
        // data: ['票据流转金额', '融资金额', '见证签署金额', '订单金额'],
        // icon: 'circle',
        //单独设置
        data:[
          {icon:'circle',name:'票据流转金额'},
          {icon:'rect',name:'融资金额',textStyle: {fontWeight: 'bold', color: 'orange'}},
          {icon:'circle',name:'见证签署金额'},
          {icon:'circle',name:'订单金额'}
        ],
        textStyle: {
            color: '#D9FFFFFF', // 图例文字的颜色
            fontSize: 11 // 图例文字的大小
        }
      },
      // toolbox: { // 下载图标 下载功能
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisTick:{ //x轴刻度尺
              show:false
          },
          data: ['1', '2', '3', '4', '5', '6', '7']
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine :{//网格线
                // show:false //关闭网格线
                lineStyle:{
                    type:'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                    color:'#312846'  //网格线颜色
                },
          },
        }
      ],
      series: [
        {
          name: '票据流转金额',
          type: 'line',
          stack: 'Total',
          smooth: true,//面积图改成弧形状
          lineStyle: {
              width: 1,//外边线宽度
              color:'#2276FC'//外边线颜色
          },
          showSymbol: false,//去除面积图节点圆
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '融资金额',
          type: 'line',
          stack: 'Total',
          smooth: true,//面积图改成弧形状
          lineStyle: {
              width: 1,//外边线宽度
              color:'#5FD5EC'//外边线颜色
          },
          showSymbol: false,//去除面积图节点圆
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '见证签署金额',
          type: 'line',
          stack: 'Total',
          smooth: true,//面积图改成弧形状
          lineStyle: {
              width: 1,//外边线宽度
              color:'#FFCF5F'//外边线颜色
          },
          showSymbol: false,//去除面积图节点圆
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '订单金额',
          type: 'line',
          stack: 'Total',
          smooth: true,//面积图改成弧形状
          lineStyle: {
              width: 1,//外边线宽度
              color:'#BC6AC9'//外边线颜色
          },
          showSymbol: false,//去除面积图节点圆
          data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
};
    option && myChart.setOption(option);
}


onMounted(() =>{
    showBarEcharts()
})




</script>

<style lang="scss" scoped>
.bottomViews{
    background: url('@/assets/business/top_left.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .topInforViews{
        height: 50px;
        width: 100%;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .left-big-title{
            display: flex;
            flex-direction: row;
            align-items: center;
            .left-space{
                width: 6px;
                height: 20px;
                background-color: #fff;
                margin-right: 5px;
            }
        }

        .rigth-money-title{
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 12px;
            color: rgba($color: #fff, $alpha: 0.85);
            margin-right: 10px;
            .left-round{
               width: 8px;
               height: 8px;
               background-color: rgba($color: #2276FC, $alpha: 1.0);
               border-radius: 4px; 
               margin-right: 5px;
            }
        }
    }



    .bottom_bar_views{
      flex: 1;
      
    }


    
}
</style>
